require(['./config'], () => {
    require(['swiper', 'template','header', 'footer'], (Swiper, template) => {
        class Index {
            constructor () {
                this.banner()
                this.getCityTemplate()
                this.getTypeTemplate()
                this.getTimeTemplate()
                this.getMainTemplate()
                this.choseCity()
            }
            banner () {
                var mySwiper = new Swiper('#banner', {
                    // direction: 'vertical', // 垂直切换选项
                    autoplay: true,
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                      el: '#banner .banner-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                      nextEl: '#banner .swiper-button-next',
                      prevEl: '#banner .swiper-button-prev',
                    }
                    
                    // 如果需要滚动条
                    // scrollbar: {
                    //   el: '.swiper-scrollbar',
                    // },
                })
            }
            // ------------------------------------------------------------------------------
            // 获取导航列表--城市部分
            getCityTemplate () {
                // 城市接口地址：https://show.bilibili.com/api/ticket/city/list?channel=4
                $.get('/api/ticket/city/list', { channel:4 }, resp => {
                    // console.log(resp)
                    if (resp.errno === 0) {
                        // 解构赋值
                        const { list } = resp.data
                        $('#citylist').append(template('citylistTemplate', { list: list })+`<li><span>更多城市</span><i class="iconfont icon-bilibili"></i></li>`)
                        // console.log(html)
                    }
                })
            }
            // ------------------------------------------------------------------------------
            // 获取导航列表--类型部分
            getTypeTemplate (city_id=-1, time) {
                // 类型接口地址：
                // https://show.bilibili.com/api/ticket/project/listconf?city_id=-1
                // https://show.bilibili.com/api/ticket/project/listconf?city_id=-1&time=10-0
                if (time == '') {
                    $.get('/api/ticket/project/listconf', {
                        city_id:city_id
                    }, resp => {
                        // console.log(resp)
                        if (resp.errno === 0) {
                            // 类型
                            const { tags } = resp.data
                            $('#typelist').html(template('typelistTemplate', { list:tags }))
                        }
                    })
                } else {
                    $.get('/api/ticket/project/listconf', {
                        city_id:city_id,
                        time:time
                    }, resp => {
                        if (resp.errno === 0) {
                            const { tags } = resp.data
                            $('#typelist').html(template('typelistTemplate', { list:tags }))
                        }
                    })
                }
            }
            // ------------------------------------------------------------------------------
            // 获取导航列表--时间筛选部分
            getTimeTemplate () {
                $.get('/api/ticket/project/listconf', { city_id:-1 }, resp => {
                    if (resp.errno === 0) {
                        // 时间
                        const { filter } = resp.data
                        $('#choselist').html(template('choselistTemplate', { list:filter }))
                    }
                })
            }
            // ------------------------------------------------------------------------------
            // 获取main商品列表
            getMainTemplate (area=-1, filter='',p_type='全部类型') {
                // 商品接口地址：
                // https://show.bilibili.com/api/ticket/project/listV2?version=134&page=1&pagesize=16&area=-1&filter=&platform=web&p_type=%E5%85%A8%E9%83%A8%E7%B1%BB%E5%9E%8B

                // const imgsrc = {
                //     0:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598555157549&di=608d03f842bbc2608ff20fab02091bf1&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150717%2Fmp23156432_1437105304919_2_th.jpeg',
                //     1:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598555819901&di=c8f6e996b66982c7becaffed6eb2d682&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F600%2Fw600h800%2F20181220%2F_zMG-hqnkypr8781495.jpg",
                //     2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598555853054&di=47a07c8263610246398c9277fddeff9c&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Fopenplatform%2F201711%2Fim8z42X32ZOgc.jpeg",
                //     3:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598555921864&di=ccfbf69f0d7ba3793e0917b1e14b40c6&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Fopenplatform%2F201807%2FimqGKfvNjpSw2.jpeg",
                //     4:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598555942677&di=84829d61fae5b880ded246d51533a445&imgtype=0&src=http%3A%2F%2Fnews.qingdaonews.com%2Fimages%2F2019-03%2F24%2F1d84b5cb-7664-46f9-bd9e-7d034136e801.jpg",
                //     5:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598555960010&di=a8a93e5a27a07bbd4b94acb5c459fdb2&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Fopenplatform%2F201806%2Fim.ps064N0Uwo.jpeg",
                //     6:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=208555915,2818223718&fm=26&gp=0.jpg",
                //     7:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556008316&di=1a963ba8d97af2f50c24880d716f7071&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fopenplatform%2F201804%2FimwFQM68H7htQ.jpeg",
                //     8:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556102195&di=33fc371514ce13331b6f52d84303a903&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F27cad4366dd5ee365d2cb95e1659ab9e0ad6177d1c8a6-tuBuKw_fw658",
                //     9:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556172101&di=e2efba91f81b21637b4c8e546a714a44&imgtype=0&src=http%3A%2F%2Fay-2016.oss-cn-beijing.aliyuncs.com%2Faiyueimg_large229993.JPG",
                //     10:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556222345&di=114a701ff024bd0dd0c4ca1494e0409c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2ed92568b7e2f4831dfefa71152f4314524bd3c33a9e5-imIdGx_fw658",
                //     11:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556242295&di=5a2906cece7b5f1f6853653688834701&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft011820efacd666082b.jpg",
                //     12:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556257687&di=b451f57a32b62ea1838d670ce0e135ba&imgtype=0&src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2707115777-654C0D753BB6A71425B2FEA65F3621AA%2F0%3Ffmt%3Djpg%26size%3D82%26h%3D800%26w%3D600%26ppv%3D1.jpg",
                //     13:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2499698457,3395850106&fm=26&gp=0.jpg",
                //     14:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598556363266&di=d4829db259be20c51516f17fffec1f27&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171124%2F8355bbdfc87b4d34abf14ea2f79e599b.jpeg",
                //     15:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2209702166,276078085&fm=26&gp=0.jpg"
                // }

                $.get('/api/ticket/project/listV2', {
                    version: 134,
                    page: 1,
                    pagesize: 16,
                    area: area,
                    filter: filter,
                    platform: 'web',
                    p_type: p_type
                }, resp => {
                    // console.log(resp)
                    if (resp.errno === 0) {
                        const { result } = resp.data
                        $('#mainlist').html(template('mainlistTemplate', { list:result }))
                    }
                })
            }
            // ------------------------------------------------------------------------------
            // 选择城市，重新渲染数据
            choseCity () {
                // 点击之后需要调用渲染商品列表的函数，需要把原来的this存起来
                const _this = this
                $('#nav').on('click', 'li', function () {
                    // 先去掉所有li的ac样式，再添加当前事件源的ac样式
                    $(this).parent().children().removeClass('ac')
                    $(this).addClass('ac')

                    // 定义三个全局变量保存请求需要的数据
                    var area, filter, p_type

                    // 通过事件委托找到li上表示城市id的自定义属性data-id
                    $('#citylist li').each(function () {
                        if ($(this).hasClass('ac')) {
                            // 获取含有ac类名的li的值
                            const cityid = $(this).attr("data-id")
                            area = cityid
                        }
                    })

                    // 找到类型列表typelist下含有ac类名的li
                    // console.log($('#typelist li'))
                    $('#typelist li').each(function () {
                        if ($(this).hasClass('ac')) {
                            // 获取含有ac类名的li的值
                            const typeval = $(this).html()
                            // console.log(typeval.trim().split(' ')[0])
                            // p_type = typeval.trim().split(' ')[0]
                            p_type = typeval.trim()
                        }
                    })

                    
                    // 找到时间列表choselist下含有ac类名的li
                    $('#choselist li').each(function () {
                        if ($(this).hasClass('ac')) {
                            // 获取含有ac类名的li的data-time的值
                            const choseval = $(this).data('time')
                            filter = choseval
                        }
                    })

                    // 打印三行列表中选中的li的相关值
                    // console.log('城市id：'+area+'，类型：'+p_type+'，时间：'+filter)

                    // if ($(this).parent().hasClass('city-list')) {
                    //     _this.getTypeTemplate(area)
                    // } else if ($(this).parent().hasClass('chose-list')){
                    //     _this.getTypeTemplate(area, filter)
                    // }
                    // _this.getTypeTemplate(area, filter)
                    _this.getMainTemplate(area, filter, p_type)
                })
            }
        }
        new Index()
    })
})